<template>
    <div>
        <el-dialog
                title="查找用户"
                :visible.sync="dialogVisible"
                width="40%"
                :before-close="handleClose">

            <!-- 查找用户框 -->
            <el-row :gutter="10">
                <el-col :span="20">
                    <el-input
                            placeholder="输入用户名称"
                            prefix-icon="el-icon-search"
                            v-model="name">
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="searchFriends">查找用户</el-button>
                </el-col>
            </el-row>


            <el-row style="height: 400px;overflow: auto" v-show="isShow">
                <template v-for="(item,index) in friendInfo">
                    <el-col :span="8" style="margin-top: 40px">
                        <div style="width: 40%;float: left;">
                            <img    style="border-radius: 10px"
                                    width="80px"
                                    height="80px"
                                    src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2614332208,4000251505&fm=11&gp=0.jpg">
                        </div>
                        <div style="width: 60%;float: left;">
                            <div style="margin-bottom: 30px">{{item.name}}</div>
                            <div>
                                <el-button size="small" type="primary" @click="addFriend(item.uid)">加好友</el-button>
                            </div>
                        </div>
                    </el-col>
                </template>
            </el-row>

        </el-dialog>
    </div>
</template>

<script>

    import * as $api from '../../api/Apis'
    import * as $Constants from '../../api/Constants'

    export default {
        name: "addFriends",
        props:{

        },
        data(){
            return {
                dialogVisible:false,
                name:'',
                friendInfo:[],
                isShow:false
            }
        },
        mounted(){
            this.$root.Bus.$on('openDialog',isShow => {
                this.dialogVisible = isShow;
            });
        },
        methods:{

            /**
             * 关闭弹框
             */
            handleClose(){
                this.dialogVisible = !this.dialogVisible;
            },
            // 搜索好友
            searchFriends(){
                let params = {
                    name:this.name,
                    uid:window.localStorage.getItem('uid')
                };
                $api.searchFriends(params).then(res => {
                    this.isShow = true;
                    if( res.code === 200 ){
                        this.friendInfo = res.data;
                    }else {
                        this.$message.error(res.message);
                    }
                })
            },
            // 添加好友请求
            addFriend(toUser){
                let params = {};
                params.fromUser = window.localStorage.getItem('uid');
                params.toUser = toUser;
                params.msgType = $Constants.MSG_TYPE_ADD_FRIEND;
                let chatWebsocket = this.$store.state.chatWebsocket;
                chatWebsocket.send(JSON.stringify(params));
            }
        }
    }
</script>

<style scoped>

</style>
